<script setup lang="ts">
import type { OperateLog } from '#/api/system/log/model';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Descriptions, DescriptionsItem } from 'ant-design-vue';

import { renderJsonPreview } from '#/utils/render';

const operateLog = ref<OperateLog>();
const [BasicModal, modalApi] = useVbenModal({
  onOpenChange: (isOpen) => {
    if (!isOpen) {
      return null;
    }
    const record = modalApi.getData() as OperateLog;
    operateLog.value = record;
  },
  onClosed() {
    operateLog.value = undefined;
  },
});
</script>

<template>
  <BasicModal
    :footer="false"
    :fullscreen-button="false"
    class="w-[1250px]"
    title="操作日志详情"
  >
    <Descriptions
      v-if="operateLog"
      size="small"
      :column="1"
      bordered
      :label-width="120"
    >
      <DescriptionsItem label="操作人ID">
        {{ operateLog.userId }}
      </DescriptionsItem>
      <DescriptionsItem label="操作人昵称">
        {{ operateLog.nickName }}
      </DescriptionsItem>
      <DescriptionsItem label="菜单名称">
        {{ operateLog.operateName }}
      </DescriptionsItem>
      <DescriptionsItem label="请求耗时">
        {{ operateLog.requestDuration }}ms
      </DescriptionsItem>
      <DescriptionsItem label="创建时间">
        {{ operateLog.gmtCreated }}
      </DescriptionsItem>
      <DescriptionsItem label="修改时间">
        {{ operateLog.gmtModified }}
      </DescriptionsItem>
      <DescriptionsItem label="操作参数">
        <div class="max-h-[300px] overflow-y-auto">
          <component :is="renderJsonPreview(operateLog.operateParam)" />
        </div>
        <!-- {{ operateLog.operateParam }} -->
      </DescriptionsItem>
      <DescriptionsItem label="返回值">
        <div class="max-h-[300px] overflow-y-auto">
          <component :is="renderJsonPreview(operateLog.operateResult)" />
        </div>
      </DescriptionsItem>
    </Descriptions>
  </BasicModal>
</template>
